<template>
  <div class="components-container">
    <!-- <div class="header-form">
       <div class="layui-inline" >
            <label class="layui-form-label">接尸日期</label>
            <div class="layui-inline" >
             <el-radio-group v-model="selectDataEixend.regDateValue" @change="getData">
              <el-radio-button  :label="DateSelectMode.now" class="radio">当日</el-radio-button>
              <el-radio-button  :label="DateSelectMode.tomorrow" class="radio">明日</el-radio-button>
              <el-radio-button  :label="DateSelectMode.future" class="radio">以后</el-radio-button>
              <el-radio-button  :label="DateSelectMode.all" class="radio">全部</el-radio-button>
             </el-radio-group>
            </div>
       </div>
    </div>
    <div class="header-form">
       <div class="layui-inline">
          <label class="layui-form-label">接尸日期从</label>
          <div class="layui-input-inline">
            <el-date-picker v-date v-model="selectDatas.WorkDateGreaterAndEquals" type="date" placeholder="请选择日期" style="width:160px;" @change="btnSearch"/> 到
            <el-date-picker v-date v-model="selectDatas.WorkDateLessAndEquals" type="date" placeholder="请选择日期" style="width:160px;" @change="btnSearch"/>
          </div>
        </div>
        <div class="layui-inline" >
            <label class="layui-form-label">逝者姓名</label>
            <div class="layui-inline">
              <el-input  v-model="selectDatas.RegnameLike" placeholder="请输入逝者姓名" @keydown.enter.native='btnSearch'></el-input>
            </div>
        </div>
        <div class="layui-inline" >
            <label class="layui-form-label">业务编号</label>
            <div class="layui-inline">
              <el-input  v-model="selectDatas.NoLike" placeholder="请输入业务编号" @keydown.enter.native="btnSearch"></el-input>
            </div>
        </div>
        <el-button type="primary" @click="btnSearch" :loading="this.$store.state.isloading">搜索</el-button>
        <el-button type="warning"  @click="btnRepeat" >重置</el-button>
    </div> -->

      <div class="header-form">
        <div class="layui-inline" >
            <label class="layui-form-label">业务编号</label>     
            <div class="layui-inline">
                <el-input  v-model="selectDatas.RegbussnumEquals" placeholder="请输入业务编号" @keydown.enter.native="btnSearch"></el-input>
            </div>
        </div>
        <div class="layui-inline" >
            <label class="layui-form-label">逝者姓名</label>  
            <div class="layui-inline">
                <el-input  v-model="selectDatas.RegnameLike" placeholder="请输入逝者姓名" @keydown.enter.native="btnSearch"></el-input>
            </div>
        </div>
        <div class="layui-inline" >
            <label class="layui-form-label">客户姓名</label>  
            <div class="layui-inline">
                <el-input  v-model="selectDatas.DpousenameLike" placeholder="请输入客户姓名" @keydown.enter.native="btnSearch"></el-input>
            </div>
        </div>
        <div class="layui-inline" >
            <label class="layui-form-label">接尸日期</label>     
            <div class="layui-inline">
                <el-date-picker v-date v-model="selectDatas.CdhactualdateGreaterAndEquals" type="date" placeholder="选择日期范围" @keydown.enter.native="btnSearch">
                </el-date-picker>   
                <el-date-picker v-date v-model="selectDatas.CdhactualdateLessAndEquals" type="date" placeholder="选择日期范围" @keydown.enter.native="btnSearch">
                </el-date-picker>    
            </div>
        </div>
        <div class="layui-inline" >
            <label class="layui-form-label">接尸地点</label>  
            <div class="layui-inline">
                <el-input  v-model="selectDatas.RegaddressLike" placeholder="请输入接尸地点" @keydown.enter.native="btnSearch"></el-input>
            </div>
        </div>
        <br>
        <div class="layui-inline" >
            <label class="layui-form-label">备注</label>  
            <div class="layui-inline">
                <el-input  v-model="selectDatas.REGREMARKLike" style="width: 450px;" placeholder="请输入备注" @keydown.enter.native="btnSearch"></el-input>
            </div>
        </div>
        <!-- <el-button type="primary" @click="getData" :loading="this.$store.state.isloading">搜索</el-button>
        <el-button  @click="btnRepeat">重置</el-button> -->
        <el-button type="primary" @click="btnSearch" :loading="this.$store.state.isloading">搜索</el-button>
        <el-button type="warning"  @click="btnRepeat" >重置</el-button>
    </div>
    <div style="margin-top:10px;">
      <ul class="toolList">
        <li><el-button type="primary" @click="btnSearch" :loading="this.$store.state.isloading">刷新</el-button></li>
        <li v-if="btnShow(item.BTNVALUE)" v-for="(item, index) in $store.state.btnListCommon" @click="operate(item.BTNVALUE)">
          <el-button type="primary" :value="item.BTNSHOWNAME" v-text="item.BTNSHOWNAME"></el-button>
        </li>
      </ul>
    </div>
    <dataTable  :headList="headList" :dataList="dataList" :pageOrder="pageOrder" @pageChange="pageChange" @selectRow="selectRow"></dataTable>
    <mainmodel ref="models"  @refreshData="getData"></mainmodel>
    <printmodal ref="printPdf"></printmodal>
  </div>
</template>

<script>
import apiBase from "@/api/apiBase.js";
import dataTable from "@/components/Table/DataTable";
import { formatDate, timeStringToDate } from "@/utils/date.js";
import { manage } from "@/mixins/managePage.js";
import { DATESELECTMODE } from "@/const/const.js";
import mainmodel from "./NegotiationMain";
import printmodal from "@/components/Pdf/Print";
import { PRINT } from "@/components/Pdf/PDF.js";
import { PRPORDER } from "@/const/orderConst.js";
import { ORDER } from "@/const/orderConst.js";

export default {
  name: "phoneAppointment",
  mixins: [manage],
  data() {
    return {
      DateSelectMode: DATESELECTMODE,

      selectData: {
        WorkDateEquals: null,
        WorkDateGreate: null
      },
      selectDatas: {
        RegnameLike: null,
        RegbussnumEquals: null,
        DpousenameLike: null,
        RegaddressLike: null,
        REGREMARKLike: null,
        NoLike: null,
        CdhactualdateGreaterAndEquals: null,
        CdhactualdateLessAndEquals: null,
        
        WorkDateGreaterAndEquals: null,
        WorkDateLessAndEquals: null,
      },
      selectDataEixend: {
        regDateValue: null,
      },
      ischangered: null,
      ischangnb: null,
    };
  },
  methods: {
    //获取电话预约数据
    getData() {   
      let data = {
        PageIndex: this.pageOrder.currentPage,
        PageSize: this.pageOrder.pageSize,
        OrderBy: this.pageOrder.orderType,
        OrderByType: this.pageOrder.orderSort,
        Data: JSON.parse(JSON.stringify(this.selectDatas))
      };
      data.Data.CdhactualdateGreaterAndEquals = formatDate(data.Data.CdhactualdateGreaterAndEquals, "yyyyMMdd");
      data.Data.CdhactualdateLessAndEquals = formatDate(data.Data.CdhactualdateLessAndEquals , "yyyyMMdd");
      apiBase.DoService(
        data,
        apiBase.getApiAdress().TalkOver.Query,
        res => {
          this.dataList = res.data.content.OutData;
          this.pageOrder.totalNum = res.data.content.RecordCount;
          this.dataList.forEach(data => {
            data.REGDATE = data.REGDATE.substring(0, 16);
            data.PRPCREMATIONDATEDESC = data.PRPCREMATIONDATEDESC.substring(0, 16);
          });
          this.$nextTick(function() {
            let rows = document.getElementsByClassName("el-table__row");
            if(this.ischangered){
              this.dataList.forEach((item,index) => {   
                  rows[index].style.color = '#606266';
                  if(item.REGCRETYPE === 'A'){
                    rows[index].style.color = 'red';
                  }
              });
            }
            if(this.ischangnb){
              this.dataList.forEach((item,index) => {
                  rows[index].style.color = '#606266';
                  if(item.REGCRETYPE === 'A'||item.REGCRETYPE === 'C'){
                    rows[index].style.color = '#007eff';
                  }
                  if(item.REGCRETYPE === 'D'){
                    rows[index].style.color = 'red';
                  }
              });
            }
          });
        }
      );
    },
    
    //获取表头
    getColumns() {
      let data = {};
      apiBase.DoService(
        data,
        apiBase.getApiAdress().Column.GetFuneralArticlesColumns,
        res => {
          this.headList = res.data.content;
        }
      );
    },

    //功能操作
    operate(order) {
      this.order = order;
      switch (this.order) {
        case PRPORDER.ADD:
          this.$refs.models.open(this.order,this.currentRow.PRPID);
          break;
        case PRPORDER.MODIFY:
          this.$refs.models.open(this.order, this.currentRow.REGID, this.currentRow.PRPID, this.currentRow.REGCURSTATUS,this.currentRow);
          break;
        case PRPORDER.DELETE:
          this.confirm(callback => {
            this.dataDelete();
          });
          break;
        case PRPORDER.INFO:
          this.$refs.models.open(this.order, this.currentRow.REGID, this.currentRow.PRPID);
          break;
        default:
      }
    },
    btnShow(btn){
      let status = null;
      if(this.currentRow){
        status = this.currentRow.PRPISTALK;
      };
      switch (btn) {
        case '新增':
          if(this.currentRow)
          return status === "A";
          break;
        case '修改':
          if(this.currentRow)
          return true;
          break;
        case '删除':
          if(this.currentRow)
          return true;
          break;
        case '详情':
          if(this.currentRow)
          return true;
          break;
        default:
          break;
      }
    },
    //取消洽谈
    dataDelete() {
      let Data = {
        PRPID: this.currentRow.PRPID
      };
      apiBase.DoService(
        Data,
        apiBase.getApiAdress().TalkOver.Delete,
        res => {
          this.getData();
        }
      );
    },
   
    initSeachdata() {
      this.selectDataEixend.regDateValue = DATESELECTMODE.now;
      // this.selectData.WorkDateEquals = formatDate(new Date(), "yyyyMMdd");
    },
    btnRepeat() {
      Object.assign(this.$data.selectDatas, this.$options.data().selectDatas);
      this.getData();
    },
  },

  components: {
    //  sweetModal,
    dataTable,
    mainmodel,
    printmodal
  },
  mounted() {
    this.initSeachdata();
  },
  activated() {
    this.getData();
  },
  created() {
    let data = {};
    apiBase.DoService(
        data,
        apiBase.getApiAdress().Param.GetIsDataTableReddening,
        res => {
            this.ischangered = res.data.content; 
        }
    );
    apiBase.DoService(
        data,
        apiBase.getApiAdress().Param.GetIsCreChangeRed,
        res => {
            this.ischangnb = res.data.content; 
        }
    );
    this.getColumns();
  },
  watch: {
    // "selectDataEixend.regDateValue": function(val) {
    //   this.selectData.WorkDateGreate = null;
    //   this.selectData.WorkDateEquals = null;
    //   switch (val) {
    //     case DATESELECTMODE.now:
    //       this.selectData.WorkDateEquals = formatDate(new Date(), "yyyyMMdd");
    //       break;
    //     case DATESELECTMODE.tomorrow:
    //       var day = new Date();
    //       day.setDate(day.getDate() + 1);
    //       this.selectData.WorkDateEquals = formatDate(day, "yyyyMMdd");
    //       break;
    //     case DATESELECTMODE.future:
    //       this.selectData.WorkDateGreate = formatDate(new Date(), "yyyyMMdd");
    //       break;
    //     default:
    //       break;
    //   }
    // },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/common.scss";
.el-button + .el-button {
  margin-left: 0;
}
.sw-table {
  width: 600px;
}
.sw-table-lable {
  width: 100px;
}
.sw-table-input {
  width: 200px;
}
.sweet-content-content {
  width: 100%;
}
</style>